<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg!==''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{widgetData.value.title}}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{widgetData.value.title}}</span></div>
    </div>
    <div :style="{width:w+'px',height:(h-40)+'px'}" id="lineChart2"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data () {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created () {},
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let chartDom = document.getElementById("lineChart2");
      let chart = this.$echarts.init(chartDom);

      const xData = this.chartData.xData;
      const yData1 = this.chartData.yData1;
      const yData2 = this.chartData.yData2;
      const yData3 = this.chartData.yData3;
      const maxValue = Math.max(...yData1.filter(item => item != '-'));
      const minVlaue = Math.min(...yData1.filter(item => item != '-'));

      let option = {
        grid: {
          top: "20%",
          left: "2%",
          right: "2%",
          bottom: "0%",
          containLabel: true,
        },
        legend:{
          textStyle: {
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400,
            fontSize: 14,
            color: "#fff",
          },
        },
        tooltip:{
          show: true,
          trigger: "axis",
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          formatter: function (params) {
            var str = params[0].name + ":";
            params.filter(function (item) {
              if (item.componentSubType == "bar") {
                str += "<br/>" + item.seriesName + "：" + item.value;
              }
              if (item.componentSubType == "line") {
                str += "<br/>" + item.seriesName + "：" + item.value;
              }
            });
            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ffffff",
              },
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "人",
            splitNumber: 5,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              padding: [0, 20, -3, 0],
            },
            axisLabel: {
              formatter: "{value}",
              color: "rgba(95, 187, 235, 1)",
              textStyle: {
                fontSize: 14,
                  color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
                type: "dashed",
              },
            },
          },
          {
            name: "%",
            type: "value",
            splitNumber: 4,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              padding: [0, -20, -3, 0],
            },
            axisLabel: {
              formatter: "{value}",
              color: "rgba(95, 187, 235, 1)",
              textStyle: {
                fontSize: 14,
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            z: 1,
            name: '数据1',
            type: "bar",
            data: yData1,
            barWidth: 10,
            barGap: "0%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0,0,0,1, [
                    {
                      offset: 0,
                      color: "rgba(57,206,255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(45,72,173, 0.1)",
                    },
                  ],
                  false
                ),
              }
            },
          },
          {
            z: 3,
            name: '数据1',
            type: "pictorialBar",
            data: yData1,
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: ["-75%", "-60%"],
            symbolSize: [10, 6],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: '#24C9FF'
              },
            },
          },
          {
            z: 1,
            name: '数据2',
            type: "bar",
            data: yData2,
            barWidth: 10,
            barGap: "50%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0,0,0,1, [
                    {
                      offset: 0,
                      color: "rgba(49,213,199, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(29,39,115, 0.1)",
                    },
                  ],
                  false
                ),
              }
            },
          },
          {
            z: 3,
            name: '数据2',
            type: "pictorialBar",
            data: yData2,
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: ["75%", "-60%"],
            symbolSize: [10, 6],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: '#31D5C7'
              },
            },
          },
          {
            name: "数据3",
            type: "line",
            data: yData3,
            showSymbol: true,
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            yAxisIndex: 1,
            lineStyle: {
              color: "#FFC748",
            },
            itemStyle: {
              normal: {
                color: 'rgba(255,199,72, 1)',
                borderColor: 'rgba(255,199,72, 0.3)', // 外圆描边色（空心）
                borderWidth: 10, // 外圆描边粗细
                lineStyle: {
                  color: 'rgba(255,199,72, .6)',
                  width: 2
                },
              }
            },
          },
        ]
      };

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      // chart.setOption(option);
      // 动态显示值
      if(option && typeof option === "object") {
        chart.setOption(option, true);
        let i1 = 0; //播放所在下标
        let mTime = setInterval(function () {
          chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: i1,
          });
          i1++;
          if(i1 >= xData.length) {
            i1 = 0;
          }
        }, 2600);
      };
    }
  },
}
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .titleBox{
    width: 100%;
    height: 40px;
    position: relative;
    .img{
      width: 100%;
      height: 40px;
      position: absolute;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .title{
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      font-size: 18px;
      color: #FFFFFF;
      background-color: #000;
    }
    .el-icon-picture{
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>